<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="80%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <!-- <t-tooltip content="提交后不可再编辑会进入审批流程"> -->
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      <!-- </t-tooltip> -->
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="130px"
        :data="formData"
        ref="form"
        :colon="true"
        :rules="edit ? rules : {}"
      >
        <t-row>
          <t-form-item label="发表科技论文数" name="fbkjlws">
            <t-input-adornment v-if="edit" append="篇">
              <t-input-number v-model="formData.fbkjlws"  placeholder="请输入发表科技论文数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.fbkjlws}} 篇</span>
          </t-form-item>
          <t-form-item label="其中：核心期刊" name="hxqk">
            <t-input-adornment v-if="edit" append="篇">
              <t-input-number v-model="formData.hxqk"  placeholder="请输入核心期刊数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.hxqk}} 篇</span>
          </t-form-item>
          <t-form-item label="其中：向国外发表" name="xgwfb" :label-width="140">
            <t-input-adornment v-if="edit" append="篇">
              <t-input-number v-model="formData.xgwfb"  placeholder="请输入向国外发表数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.xgwfb}} 篇</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="其中：SCI、EI、CPCI-S 收录" name="sci" :label-width="210">
            <t-input-adornment v-if="edit" append="篇">
              <t-input-number v-model="formData.sci"  placeholder="请输入SCI、EI、CPCI-S 收录数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sci}} 篇</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="出版著作数" name="cbzzs" :label-width="100">
            <t-input-adornment v-if="edit" append="部">
              <t-input-number v-model="formData.cbzzs"  placeholder="请输入出版著作数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.cbzzs}} 部</span>
          </t-form-item>
          <t-form-item label="出版著作数" name="cbzzszs" :label-width="100">
            <t-input-adornment v-if="edit" append="万字">
              <t-input-number v-model="formData.cbzzszs"  placeholder="请输入出版著作数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.cbzzszs}} 万字</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="专利申请受理数" name="zlsqsls">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.zlsqsls"  placeholder="请输入专利申请受理数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.zlsqsls}} 项</span>
          </t-form-item>
          <t-form-item label="其中：发明专利" name="fmzl">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.fmzl"  placeholder="请输入发明专利数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.fmzl}} 项</span>
          </t-form-item>
          <t-form-item label="其中：实用新型" name="syxxzl">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.syxxzl"  placeholder="请输入实用新型数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.syxxzl}} 项</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="其中：国外申请受理数" name="gwsqsls" :label-width="170">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.gwsqsls"  placeholder="请输入国外申请受理数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.gwsqsls}} 项</span>
          </t-form-item>
          <t-form-item label="其中：PCT 专利申请" name="pctzlsq" :label-width="165">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.pctzlsq"  placeholder="请输入PCT 专利申请数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.pctzlsq}} 项</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="专利授权数" name="zlsqs" :label-width="100">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.zlsqs"  placeholder="请输入专利授权数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.zlsqs}} 项</span>
          </t-form-item>
          <t-form-item label="其中：发明专利" name="sqfmzl">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.sqfmzl"  placeholder="请输入发明专利数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sqfmzl}} 项</span>
          </t-form-item>
          <t-form-item label="其中：实用新型" name="sqsyxxzl">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.sqsyxxzl"  placeholder="请输入实用新型数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.sqsyxxzl}} 项</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="其中：国外授权数" name="gwsqs" :label-width="140">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.gwsqs"  placeholder="请输入国外授权数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.gwsqs}} 项</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="软件著作权登记数" name="rjzzq" :label-width="140">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.rjzzq"  placeholder="请输入软件著作权登记数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.rjzzq}} 项</span>
          </t-form-item>
          <t-form-item label="科技成果推广应用数" name="kjcgtgyys" :label-width="160">
            <t-input-adornment v-if="edit" append="项">
              <t-input-number v-model="formData.kjcgtgyys"  placeholder="请输入科技成果推广应用数" theme="normal" />
            </t-input-adornment>
            <span v-else>{{formData.kjcgtgyys}} 项</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-col :span="2"><span style="line-height: 32px">科技成果转让</span></t-col>
          <t-col :span="3">
            <t-form-item label="合同数" name="kjcgzrhts" :label-width="70">
              <t-input-adornment v-if="edit" append="项">
                <t-input-number v-model="formData.kjcgzrhts"  placeholder="请输入科技成果转让-合同数" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgzrhts}} 项</span>
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item label="合同金额" name="kjcgzrhtje" :label-width="85">
              <t-input-adornment v-if="edit" append="万元">
                <t-input-number v-model="formData.kjcgzrhtje"  placeholder="请输入科技成果转让-合同金额" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgzrhtje}} 万元</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2"><span style="line-height: 32px">科技成果许可</span></t-col>
          <t-col :span="3">
            <t-form-item label="合同数" name="kjcgxkhts" :label-width="70">
              <t-input-adornment v-if="edit" append="项">
                <t-input-number v-model="formData.kjcgxkhts"  placeholder="请输入科技成果许可-合同数" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgxkhts}} 项</span>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="合同金额" name="kjcgxkhtje" :label-width="85">
              <t-input-adornment v-if="edit" append="万元">
                <t-input-number v-model="formData.kjcgxkhtje"  placeholder="请输入科技成果许可-合同金额" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgxkhtje}} 万元</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="2"><span style="line-height: 32px">科技成果作价投资</span></t-col>
          <t-col :span="3">
            <t-form-item label="合同数" name="kjcgzjtzhts" :label-width="70">
              <t-input-adornment v-if="edit" append="项">
                <t-input-number v-model="formData.kjcgzjtzhts"  placeholder="请输入科技成果作价投资-合同数" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgzjtzhts}} 项</span>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="合同金额" name="kjcgzjtzhtje" :label-width="85">
              <t-input-adornment v-if="edit" append="万元">
                <t-input-number v-model="formData.kjcgzjtzhtje"  placeholder="请输入科技成果作价投资-合同金额" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.kjcgzjtzhtje}} 万元</span>
            </t-form-item>
          </t-col>
        </t-row>
        <t-row>
          <t-col :span="3"><span style="line-height: 32px">技术开发、技术咨询、技术服务</span></t-col>
          <t-col :span="3">
            <t-form-item label="合同数" name="jskfhts" :label-width="70">
              <t-input-adornment v-if="edit" append="项">
                <t-input-number v-model="formData.jskfhts"  placeholder="请输入技术开发、技术咨询、技术服务-合同数" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.jskfhts}} 项</span>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="合同金额" name="jskfhtje" :label-width="85">
              <t-input-adornment v-if="edit" append="万元">
                <t-input-number v-model="formData.jskfhtje"  placeholder="请输入技术开发、技术咨询、技术服务-合同金额" theme="normal" />
              </t-input-adornment>
              <span v-else>{{formData.jskfhtje}} 万元</span>
            </t-form-item>
          </t-col>
        </t-row>
  
        <t-row><b>科学技术奖获奖情况</b></t-row>
        <t-card hover-shadow v-for="(info, index) in formData.awardsInfos" :key="info.tid">
          <t-row justify="space-between">
            <t-col :span="4" style="padding-right: 10px">
              <t-form-item label="成果名称" :name="`awardsInfos[${index}].name`" :label-width="80">
                <t-input v-if="edit" v-model="info.name" placeholder="请输入成果名称"></t-input>
                <span v-else>{{info.name}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="4" style="padding-right: 10px">
              <t-form-item label="授奖单位" :name="`awardsInfos[${index}].prizeName`" :label-width="80">
                <t-input v-if="edit" v-model="info.prizeName" placeholder="请输入授奖单位"></t-input>
                <span v-else>{{info.prizeName}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item label="奖励名称" :name="`awardsInfos[${index}].awardsName`" :label-width="80">
                <t-input v-if="edit" v-model="info.awardsName" placeholder="请输入奖励名称"></t-input>
                <span v-else>{{info.awardsName}}</span>
              </t-form-item>
            </t-col>
          </t-row>
          <t-row justify="space-between">
            <t-col :span="4" style="padding-right: 10px">
              <t-form-item label="获奖等级" :name="`awardsInfos[${index}].awardsLevel`" :label-width="80">
                <t-select v-if="edit" v-model="info.awardsLevel" :options="dict.type.awards_level" placeholder="请输入获奖等级" />
                <span v-else>{{info.awardsLevel|filterByDict(dict.type.awards_level)}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="4" style="padding-right: 10px">
              <t-form-item label="奖励级别" :name="`awardsInfos[${index}].awardsRank`" :label-width="80">
                <t-select v-if="edit" v-model="info.awardsRank" :options="dict.type.awards_rank" placeholder="请输入奖励级别" />
                <span v-else>{{info.awardsRank|filterByDict(dict.type.awards_rank)}}</span>
              </t-form-item>
            </t-col>
            <t-col :span="1" :offset="3" v-if="edit">
              <t-button variant="dashed" theme="danger" @click="delLine(index)">删除此行</t-button>
            </t-col>
          </t-row>
        </t-card>
        <t-card hover-shadow v-if="edit">
          <t-button variant="dashed" theme="primary" @click="addLine">
            <t-icon name="add" slot="icon" />
            添加一行
          </t-button>
        </t-card>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabTechnologicalAchievementsForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  dicts: ['awards_level', 'awards_rank'],
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        fbkjlws: undefined,
        hxqk: undefined,
        xgwfb: undefined,
        sci: undefined,
        cbzzs: undefined,
        cbzzszs: undefined,
        zlsqsls: undefined,
        fmzl: undefined,
        syxxzl: undefined,
        gwsqsls: undefined,
        pctzlsq: undefined,
        zlsqs: undefined,
        sqfmzl: undefined,
        sqsyxxzl: undefined,
        gwsqs: undefined,
        rjzzq: undefined,
        kjcgtgyys: undefined,
        kjcgzrhts: undefined,
        kjcgzrhtje: undefined,
        kjcgxkhts: undefined,
        kjcgxkhtje: undefined,
        kjcgzjtzhts: undefined,
        kjcgzjtzhtje: undefined,
        jskfhts: undefined,
        jskfhtje: undefined,
        awardsInfos: [],
        approveStatus: '1',
      },
      rules: {
        fbkjlws: [{ required: true, message: '发表科技论文数不能为空' }],
        hxqk: [{ required: true, message: '核心期刊数不能为空' }],
        xgwfb: [{ required: true, message: '向国外发表数不能为空' }],
        sci: [{ required: true, message: 'SCI、EI、CPCI-S 收录数不能为空' }],
        cbzzs: [{ required: true, message: '出版著作数不能为空' }],
        cbzzszs: [{ required: true, message: '出版著作数不能为空' }],
        zlsqsls: [{ required: true, message: '专利申请受理数不能为空' }],
        fmzl: [{ required: true, message: '发明专利数不能为空' }],
        syxxzl: [{ required: true, message: '实用新型数不能为空' }],
        gwsqsls: [{ required: true, message: '国外申请受理数不能为空' }],
        pctzlsq: [{ required: true, message: 'PCT 专利申请数不能为空' }],
        zlsqs: [{ required: true, message: '专利授权数不能为空' }],
        sqfmzl: [{ required: true, message: '发明专利数不能为空' }],
        sqsyxxzl: [{ required: true, message: '实用新型数不能为空' }],
        gwsqs: [{ required: true, message: '国外授权数不能为空' }],
        rjzzq: [{ required: true, message: '软件著作权登记数不能为空' }],
        kjcgtgyys: [{ required: true, message: '科技成果推广应用数不能为空' }],
        kjcgzrhts: [{ required: true, message: '科技成果转让-合同数不能为空' }],
        kjcgzrhtje: [{ required: true, message: '科技成果转让-合同金额不能为空' }],
        kjcgxkhts: [{ required: true, message: '科技成果许可-合同数不能为空' }],
        kjcgxkhtje: [{ required: true, message: '科技成果许可-合同金额不能为空' }],
        kjcgzjtzhts: [{ required: true, message: '科技成果作价投资-合同数不能为空' }],
        kjcgzjtzhtje: [{ required: true, message: '科技成果作价投资-合同金额不能为空' }],
        jskfhts: [{ required: true, message: '技术开发、技术咨询、技术服务-合同数不能为空' }],
        jskfhtje: [{ required: true, message: '技术开发、技术咨询、技术服务-合同金额不能为空' }],
        // list
        name: [{ required: true, message: '成果名称不能为空' }],
        prizeName: [{ required: true, message: '授奖单位不能为空' }],
        awardsName: [{ required: true, message: '奖励名称不能为空' }],
        awardsLevel: [{ required: true, message: '获奖等级不能为空' }],
        awardsRank: [{ required: true, message: '奖励级别不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    getDetail() {
      this.$api.kjtjdc.table.resultInfo.getInfoById(this.infoId).then(({data}) => {
        this.formData = data;
        this.formLoading = false
      }).catch(e => {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      });
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      this.$api.kjtjdc.table.resultInfo[action](this.formData).then(() => {
        this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
        this.btnLoading = false
        this.$emit('update:visible', false);
        this.$emit('reload');
      }).catch(e => {
        this.$message.error(e)
        this.btnLoading = false
      })
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
    addLine() {
      const tid = Math.random().toString(32).substring(2, 7)
      this.formData.awardsInfos.push({tid})
    },
    delLine(idx) {
      this.formData.awardsInfos.splice(idx, 1)
    }
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
.t-row:last-of-type {
  margin-bottom: 0;
}
.t-card {
  margin-bottom: 10px;
}
</style>
